<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/Withdraw')">商户提现</a></el-breadcrumb-item>
                <el-breadcrumb-item>提现明细</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 用户信息 -->
            <div class="userinformation">
              <!-- <div class="title">订单详情</div> -->
              <!-- 信息 -->
              <div class="proMsg">
                <!-- <div class="title">
                  <p>名字</p>
                  <p>说明</p>
                  <p>金额</p>
                  <p>处理时间</p>
                  <p>明细状态</p>
                </div> -->
                <!-- <div v-for="(item,index) in list" :key="index" class="list">
                  <P>{{item.mechanicName}}</P>
                </div>
                <div v-for="(item,index) in list" :key="index" class="list">
                  <P>{{item.explains}}</P>
                </div>
                <div v-for="(item,index) in list" :key="index" class="list">
                  <P>{{item.money}}</P>
                </div>
                <div v-for="(item,index) in list" :key="index" class="list">
                  <P>{{item.overTime}}</P>
                </div>
                <div v-for="(item,index) in list" :key="index" class="list">
                  <P>{{item.status}}</P>
                </div> -->
                <el-table ref="multipleTable" :data="list"  tooltip-effect="dark" style="width: 100%">
                  <el-table-column prop="mechanicName" label="名字"></el-table-column>
                  <el-table-column prop="explains" label="说明"></el-table-column>
                  <el-table-column prop="money" label="金额"></el-table-column>
                  <el-table-column prop="overTime" label="处理时间" :formatter="dateForma"></el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status==1">成功</span>
                      <span v-if="scope.row.status==2">驳回</span>
                      <span v-if="scope.row.status==3">正在提现</span>
                      <span v-if="scope.row.status==4">失败</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'OrdersDetails',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:',',//订单id
        list:[]
      }
    },
    mounted() {
      // 取到路由带过来的参数
      this.id= JSON.parse(JSON.stringify(this.$route.query.data));

      console.log("订单信息1:"+this.id);
      this.getOrdersDetails();
    },
    // 时间格式过滤
    filters: {
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 路由
      goTo(path) {
        this.$router.push(path);
      },
      // 获取详情
      getOrdersDetails(){
        this.$axios.post(this.baseURL1+'admin/withdraw/withdrawDetail',{
          "mechanicId": this.id,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"提现明细");
          this.list= res.data.data.records
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userinformation{
    width: 100%;
    height: 100%;
    // border: #008A00 1px solid;
    box-sizing: border-box;
    background-color: #F0F0F0;
    .title{
      margin-bottom: 10px;
    }
    .proMsg{
      width: 100%;
      height: auto;
      min-height: 100px;
      background-color: #FFFFFF;
      margin-bottom: 10px;
      // border: 1px solid red;
      box-sizing: border-box;
      .title{
        width: 100%;
        height: 30px;
        background-color: #d1d1d1;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 30px;
        p{
          display: inline-block;
          font-weight: bold;
          width: 19%;
          height: 100%;
          text-align: left;
        }
        p:last-child{
          text-align: right;
        }
      }
      .list{
        display: inline-block;
      }
    }
  }

</style>
